import React from 'react';
import { View, Text, TouchableOpacity, Touchable,Image} from 'react-native';
import moment from 'moment'
import navigationhelper from 'src/components/navigationhelper'
import {CalendarList, LocaleConfig} from 'react-native-calendars';
import NavBar from 'src/components/navBar'
import Layer from 'src/components/Layer'
import {isIPhoneX,deviceWidth} from 'src/util'
import ScrollableTabView from 'react-native-scrollable-tab-view'


export default class repayMentRecordCell extends React.Component {

    constructor(props) {
      super(props);

    }

    gotoRepayDetail=(id)=>{
        navigationhelper.navigate('RepaymentRecordDetail',{repayId:id})
    }


    getCellTitle=(title,detailtitle)=>{
        return(
            <View style={{paddingLeft: 15,paddingRight:15,marginTop:10,flexDirection:'row',justifyContent:'space-between',alignItems: 'center',}}>
            <Text style={{color:'#8E8E93',fontSize:12,}}>{title}</Text>
            <Text style={{color:'#2E2E2E',fontSize:11,marginTop:10}}>{detailtitle}</Text>
            </View>
        )
    }

    getStutasColor=(status)=>{
      let  statusStrColor;
      switch (status) {
          case 1: {
            statusStrColor = '#76D358'
              break;
          }
          case 2: {
            statusStrColor = '#F1B53E'
              break;
          }
          case 3: {
            statusStrColor = '#76D358'
              break;
          }
          case 4: {
            statusStrColor = '#8E8E93'
              break;
          }
          case 5: {
            statusStrColor = '#FF5B5B'
              break;
          }
          default: {
            break;
          }
      }
     return statusStrColor;
  }


    getStutas=(status)=>{
        let  statusStr;
        switch (status) {
            case 1: {
                statusStr = '已制定'
                break;
            }
            case 2: {
                statusStr = '执行中'
                break;
            }
            case 3: {
                statusStr = '已完成'
                break;
            }
            case 4: {
                statusStr = '已取消'
                break;
            }
            case 5: {
                statusStr = '已失败'
                break;
            }
            default: {
              break;
            }
        }
       return statusStr;
    }


    render(){
        const {itemData} = this.props
        let stutasStr  = this.getStutas(parseInt(itemData.status))
        let stutasStrColor  = this.getStutasColor(parseInt(itemData.status))
        const arrDatas = [{'title':'还款时间',detailtitle:itemData.create_time},
        {'title':'预留额度',detailtitle:itemData.reserve_amount},
        {'title':'已消费',detailtitle:itemData.already_consume_amount},
        {'title':'已还款',detailtitle:itemData.already_repayment_amount},
        {'title':'已扣手续费',detailtitle:itemData.already_produce_charge},
       ];
        return(
        <View style={{backgroundColor:'#fff',paddingBottom:20}}>
          <View style={{flexDirection:'row',justifyContent:'space-between',alignItems: 'center',}}>
           <View style={{flexDirection:'row',alignItems: 'center'}}>
           <Image style={{marginLeft:10,marginTop:10,width:30,height:30}} source={{uri:itemData.bank_logo}}>
            </Image>
            <Text style={{marginTop:7.5,marginLeft:10,color:'#2E2E2E',fontSize:'bold',fontSize:16}}>{itemData.bank_name}</Text>
           </View>
        <TouchableOpacity
          activeOpacity ={0.8}
          onPress={()=>{
            this.gotoRepayDetail(itemData.id)
          }}>
          <View style={{flexDirection:'row',alignItems: 'center',marginRight: 10,marginTop:10}}>
           <Text style={{color:'#8E8E93',fontSize:12}}>查看详情</Text>
           <Image style={{width:20,height:20}} source={require('src/assets/icon_arrow_grey.png')}>
            </Image>
           </View>
          
        </TouchableOpacity>
           </View>
           <View style={{marginTop:10,backgroundColor:'#E6E3E6',height:1,marginLeft:10,width:deviceWidth-20}}/>
           {
            arrDatas.map((data, index) => {
                return (
                  this.getCellTitle(data.title,data.detailtitle)
                )
              })
            }
            <View style={{marginTop:20,marginRight:10,flexDirection:'row',alignItems:'center',justifyContent:'flex-end'}}>
              <Text style={{color:'#8E8E93',fontSize:12}}>还款总额: </Text>
              <Text style={{color:'#ff2121',fontSize:15}}>{'¥'+itemData.amount}</Text>
            </View>
           

            <View style={{marginTop:10,backgroundColor:'#E6E3E6',height:1,marginLeft:10,width:deviceWidth-20}}/>
              <View style={{marginTop:20,flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                <Text style={{color:stutasStrColor,fontSize:12,marginLeft:15}}>{'状态:'+ stutasStr}</Text>

                {stutasStr == '已制定'? <TouchableOpacity
                activeOpacity ={0.8}
                onPress={()=>{
                    this.props.cancelpayDetail()
                }}>
                  <View style={{backgroundColor:'#ff2121',borderRadius:16,alignItems:'center',width:64,height:26,marginRight:20,justifyContent:'center'}}>
                    <Text style={{color:'#fff',fontSize:14}}>取消</Text>
                  </View>
                </TouchableOpacity>:(stutasStr == '执行中'?<TouchableOpacity
                  activeOpacity ={0.8}
                  onPress={()=>{
                      this.props.cancelpayDetail()
                  }}>
                  <View style={{paddingHorizontal:5,paddingVertical:5,backgroundColor:'#ff2121',borderRadius:16,alignItems:'center',width:64,height:26,marginRight:20,justifyContent:'center'}}>
                    <Text style={{color:'#fff',fontSize:14}}>取消</Text>
                  </View>
                </TouchableOpacity>:
                null
              )}

            </View>
        </View>
        ) 
    }
 }